//二维图像处理
import './style/index.less';
import webglUtils from './ThirdParty/webgl-utils';

import VS from './Shaders/demo2VS.glsl';
import FS from './Shaders/demo2FilterFS.glsl';

function render(image){
    const canvas = document.getElementById("canvas");
    const gl = canvas.getContext('webgl2');
    if (!gl) {
        console.log('webgl2 not supported');
    }
    
    const program = webglUtils.createProgramFromSources(gl, [VS, FS]);

    //attribute和uniform的位置
    const positionAttributeLocation = gl.getAttribLocation(program, "a_position");
    const texCoordAttributeLocation = gl.getAttribLocation(program, "a_texCoord");
    const resolutionUniformLocation = gl.getUniformLocation(program, "u_resolution");
    const imageLocation = gl.getUniformLocation(program,"u_image");

    //attribute的状态
    const vao = gl.createVertexArray();
    //关联当前使用这个vao
    gl.bindVertexArray(vao);

    //创建position数据的buffer
    const positionBuffer = gl.createBuffer();
    //启用position attribute
    gl.enableVertexAttribArray(positionAttributeLocation);
    gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);

    //告诉attribute如何从positionBuffer读取数据
    const size1 = 2;
    const type1 = gl.FLOAT;
    const normalize1 = false;
    const stride1 = 0;
    const offset1 = 0;
    gl.vertexAttribPointer(positionAttributeLocation, size1, type1, normalize1, stride1, offset1);

    //创建texture coordinates的buffer
    const texCoordBuffer = gl.createBuffer();
    gl.enableVertexAttribArray(texCoordAttributeLocation);
    gl.bindBuffer(gl.ARRAY_BUFFER, texCoordBuffer);
    //存入数据
    gl.bufferData(gl.ARRAY_BUFFER,new Float32Array([
        0,0,
        1,0,
        0,1,
        0,1,
        1,0,
        1,1
    ]), gl.STATIC_DRAW);
    const size2 = 2;
    const type2 = gl.FLOAT;
    const normalize2 = false;
    const stride2 = 0;
    const offset2 = 0;
    gl.vertexAttribPointer(texCoordAttributeLocation, size2, type2, normalize2, stride2, offset2);

    //创建Texture
    const texture = gl.createTexture();
    gl.activeTexture(gl.TEXTURE0+0);
    gl.bindTexture(gl.TEXTURE_2D, texture);

    //设置texture的各项参数
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);

    //将image传入texture
    const mipLevel = 0;
    const internalFormat = gl.RGBA;
    const srcFormat = gl.RGBA;
    const srcType = gl.UNSIGNED_BYTE;
    gl.texImage2D(gl.TEXTURE_2D,mipLevel,internalFormat,srcFormat,srcType,image);

    //调整分辨率与canvas大小相等
    webglUtils.resizeCanvasToDisplaySize(gl.canvas);
    //调整webgl画布大小与canvas大小相等
    gl.viewport(0, 0, gl.canvas.width, gl.canvas.height);
    gl.clearColor(0, 0, 0, 0);
    gl.clear(gl.COLOR_BUFFER_BIT);

    //使用创建的以上的program
    gl.useProgram(program);

    //这里需要再次关联吗？
    gl.bindVertexArray(vao);
    //uniform一定要在useProgram之后传入
    gl.uniform2f(resolutionUniformLocation, gl.canvas.width, gl.canvas.height);
    //告诉shader在unit 0的位置获取texture
    gl.uniform1i(imageLocation, 0);

    //激活position buffer，在setRectangle中用
    gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
    //设置画框（两个三角形）的position
    setRectangle(gl, 0, 0, image.width, image.height);

    const primitiveType = gl.TRIANGLES;
    const offset3 = 0;
    const count = 6;
    gl.drawArrays(primitiveType, offset3, count);
}

function main(){
    const image = new Image();
    image.src = require('./assets/1552984768637.jpg');
    image.onload = ()=>{
        render(image);
    }
}

function setRectangle(gl, x, y, width, height) {
    var x1 = x;
    var x2 = x + width;
    var y1 = y;
    var y2 = y + height;
    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([
       x1, y1,
       x2, y1,
       x1, y2,
       x1, y2,
       x2, y1,
       x2, y2,
    ]), gl.STATIC_DRAW);
  }

  main();